<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { queryUsers } from '@/api/user'
import TableComponent from '@/components/table/index.vue'
import { formatTime } from '@/utils'
import {columns} from './data'
import type { Users } from '@/api/interface'

// 获取用户列表
const userList = ref<Users.QueryUsers>([])
const getUserList = async () => {
    const result = await queryUsers()
    userList.value = result.map(item => {
        return {
            ...item,
            createdAt: formatTime(item.createdAt)
        }
    })
}
onMounted(getUserList)
</script>

<template>
    <div class="user-container base-card">
        <div class="table-container">
            <TableComponent
                :columns="columns"
                :initial="userList"
                :is-pagination="false"
                border
                index
            >
                <template #gender="{ scope: { row } }">
                    <span v-if="row.gender === 'male'">男</span>
                    <span v-if="row.gender === 'female'">女</span>
                    <span v-if="row.gender === 'unknown'">未知</span>
                </template>
                <template #state="{ scope: { row } }">
                    <el-tag type="success" v-if="row.state === '1'">正常</el-tag>
                    <el-tag type="warning" v-if="row.state === '2'">异常</el-tag>
                    <el-tag type="danger" v-if="row.state === '3'">已封禁</el-tag>
                    <el-tag type="info" v-if="row.state === '4'">已注销</el-tag>
                </template>
            </TableComponent>
        </div>
    </div>
</template>

<style scoped lang="scss">
.user-container {
    .table-container {
        width: 100%;
        height: 100%;
    }
}
</style>
